<template>
  <div class="h-100 p-8">
    <div v-if="pageSetting.mode" class="h-100">
      <FileTypeVue v-if="currentFile.type === 'file'" />
      <FolderType v-else-if="currentFile.type == 'folder'" />
      <Props v-else-if="currentFile.type == 'props'" />
      <div v-else class="text-999 flex flex-s h-100">请点击选项</div>
    </div>
    <!-- 没有选择文件的时候 -->
    <TemplateCenter v-else class="flex flex-s config h-100 w-100" />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import FileTypeVue from "./FileType.vue";
import Props from "./Props.vue";
import FolderType from "./FolderType.vue";
import { treeBus } from "../bus/treeData";
import TemplateCenter from "../layout/TemplateCenter.vue";
import { pageSetting } from "../bus/bin";

var currentFile = computed(() => {
  return treeBus.selectItem;
});
</script>

<style lang="scss" scoped>
$primary-color: #faad14;

.text-primary {
  color: $primary-color;
}
.config-page {
  overflow-y: scroll;
}
</style>
